<template>
	<view class="g-detail">
		<!-- <image :src="detialInfo.goodsImages" class="bimg" mode=""></image> -->
		<uni-swiper-dot :info="detialInfo.goodsImages" :current="current" field="content" :mode="mode" :selectedBackgroundColor="'#666666'">
			<swiper class="swiper-box" @change="swiperChange">
				<swiper-item v-for="(item ,index) in detialInfo.goodsImages" :key="index">
					<view class="swiper-item" @tap="previewImage(item,detialInfo.goodsImages)">
						<image class="bimg" :src="item" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="cont-info">
			<view class="cont" @tap="isShow = false">
				<view class="item">
					品名
					<text class="r-t">{{detialInfo.productName || '-'}}</text>
				</view>
				<view class="item">
					品牌
					<text class="r-t">{{detialInfo.brandName || '-'}}</text>
				</view>
				<!-- <view class="item">
					颜色分类
					<text class="r-t">{{detialInfo.colorType || '-'}}</text>
				</view> -->
				<view class="item">
					售价
					<text class="r-t p">¥{{detialInfo.price || ''}}</text>
				</view>
				<view class="item nc">
					描述
					<view class="r-t">{{detialInfo.descript}}</view>
				</view>
			</view>
			<view class="c-bnt" @tap="getAddCartFn(detialInfo)">
				加入购物车
			</view>
			<view class="hr" v-if="totalNum >=1"></view>
			<!--购物车列表-->
			<CartList ref="cart" @EventGoPay="eventGoPay"/>
		</view>
	</view>
</template>

<script>
	// import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	import {addUserAddr,getUserAddr,verfiyCode} from '@/api/user.js'
	import {getGoodsInfo,getAddCart,getReduceCart,getSubCart} from '@/api/goods.js'
	import CartList from '../cartBox/cartBox.vue'
	let flag = true
	export default {
		components:{
			// pickerAddress,
			CartList
		},
		data() {
			return {
				def: {},
				detialInfo: {},
				cartNum: 0,
				params: {},
				current: 0,
				mode: 'default',
			};
		},
		onLoad(ops) {
			console.log(ops)
			this.def = ops
			this.getInfo()
			this.params = {
				orderOrigin: ops.orderOrigin,
				subjectId: ops.subjectId,
				showId: ops.showId
			}
		},
		methods:{
			eventGoPay(obj) {
				this.goPay(obj.cartListData)
			},
			previewImage(imgUrl,list) {
				uni.previewImage({
				    urls: list, //需要预览的图片http链接列表，注意是数组
				    current: imgUrl, // 当前显示图片的http链接，默认是第一个
				    success: function (res) { },
				    fail: function (res) { },
				    complete: function (res) { },
				})
			},
			swiperChange(e) {
				this.current = e.detail.current
			},
			getInfo(){
				getGoodsInfo({id:this.def.id}).then((res) => {
					this.detialInfo = res
					this.detialInfo.goodsImages = res.goodsImages.split(',')
					this.params.id = this.def.id
					this.$nextTick(() => {
						this.$refs.cart.init(this.def.id)
					})
				})
			},
			// 加入购物车
			getAddCartFn(item){
				// if(this.cartNum >=1) {
				// 	uni.showToast({
				// 		title: '限购买一件商品',
				// 		icon: "none"
				// 	});
				// 	return false;
				// 	return
				// }
				
				getAddCart({count:1, goodsId: item.id}).then((res) => {
					// let list = res.goods
					// this.cartListData = list
					// {unitPrice: 0.1, count: 1, id: "1678258463516065793", goodsName: "穿戴甲甲片彩绘"}
					// this.getCartList()
					this.$nextTick(() => {
						this.$refs.cart.init(this.def.id)
					})
				})
			},
			change(data) {
				this.txt = data.data ? data.data.join('-') : ''
				console.log(this.txt)
			},
		}
	}
</script>

<style lang="less" scoped>
/deep/ .uni-popup__wrapper{
	border-radius: 24rpx;
}

.g-detail{
	.swiper-box{
		width: 750rpx;
		height: 516rpx;
	}
	
	.bimg{
		width: 750rpx;
		// height: 560rpx;
	}
	.cont-info{
		position: absolute;
		left: 0px;
		top: 504rpx;
		// bottom: 0;
		width: 750rpx;
		height: 944rpx;
		border-radius: 40rpx 40rpx 0px 0px;
		// background: #FFFFFF;
		background: linear-gradient(180deg, #FFFFFF 4%, rgba(246,241,235,0.00) 100%);
		box-shadow: 0px 8rpx 20rpx 0px rgba(228, 73, 91, 0.05);
		.cont{
			background: linear-gradient(180deg, #FFCBD3 4%, rgba(246,241,235,0.00) 100%);
			margin: 32rpx;
			border-radius: 20rpx;
			padding: 32rpx;
		}
		.item{
			font-size: 28rpx;
			color: #666;
			display: flex;
			align-items: center;
			margin-bottom: 32rpx;
		}
		
		.r-t{
			font-size: 32rpx;
			color: #333;
			flex: 1;
			text-align: right;
		}
		.nc{
			align-items: normal;
			.r-t{
				font-size: 28rpx;
				margin-left: 60rpx;
				text-align: left;
			}
		}
		.p{
			color: #E4919D;
		}
		.c-bnt{
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background: #E4919D;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			margin: 0 auto;
		}
		.hr{
			height: 1rpx;
			background-color: #F1F3F4;
			margin-top: 24rpx;
		}
	}
	.mask{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
	
	}
	.t-bnt{
		width: 320rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background: #E4919D;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		margin: 45rpx auto;
	}
}
/deep/.uni-swiper__dots-box{
	bottom: 42rpx !important;
}
</style>
